<template>
  <div class="login_root">
    <div class="login_main">
      <el-form
        class="login_form"
        ref="loginForm"
        :model="loginInfo"
        :rules="loginRules"
        :label-width="0"
      >
        <el-form-item prop="loginname">
          <el-input v-model="loginInfo.loginname" placeholder="请输入账号">
            <template #prefix>
              <img class="login_prefix" src="@/assets/login/user.png">
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="loginpsw">
          <el-input v-model="loginInfo.loginpsw" placeholder="请输入密码" show-password>
          <template #prefix>
            <img class="login_prefix" src="@/assets/login/key.png">
          </template>
        </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login_btn" @click="onSubmit">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from 'vuex';
import { login } from '@/api/index'
import { ElMessage } from 'element-plus'

export default defineComponent({
  setup() {
    const store = useStore();
    return {
      store
    }
  },
  data() {
    return {
      loginRules: {
        loginname: [
            {
              required: true,
              message: '请输入账号',
              trigger: 'blur',
            },
            {
              min: 3,
              max: 7,
              message: '长度3-7位',
              trigger: 'blur',
            },
          ],
        loginpsw: [
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur',
            },
            {
              min: 6,
              max: 10,
              message: '长度6-10位',
              trigger: 'blur',
            },
          ],
      },
      loginInfo: {
        loginname: "",
        loginpsw: ""
      }
    };
  },
  methods: {
    onSubmit() {
      let loginForm: any = this.$refs.loginForm;
      loginForm.validate((valid: boolean) => {
        if (valid) {
          login(this.loginInfo).then(data => {
            if (data.code === 0) {
              this.store.commit("setUserInfo", data.obj);
              this.$router.push("/");
            } else {
              ElMessage.error(data.msg);
            }
            console.log(data);
          });
        } else {
          return false
        }
      })
    }
  }
});
</script>
<style scoped>
.login_root {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../assets/login/login_bg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}
.login_main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  width: 434px;
  height: 300px;
  background-image: url("../assets/login/login_inner.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.login_form {
  margin: 60px 40px 40px 40px;
}
.login_prefix {
  margin: auto;
  width: 20px;
  height: 20px;
}
.login_btn {
  margin-top: 30px;
  width: 100%;
  font-size: 20px;
}
</style>